<template>
  <el-card class="category-card" shadow="hover" @click="handleCardClick">
    <template #header>
      <div class="card-header" style="display: flex; align-items: center; gap: 8px;">
        <el-icon>
          <component :is="category.icon || 'Coin'"/>
        </el-icon>
        <span>{{ category.name }}部分信息</span>
      </div>
    </template>
    <div>
      <p class="category-total">上月总支出: ¥{{ totalAmountLast }}</p>
      <p class="category-total">当月总支出: ¥{{ totalAmountCurrent }}</p>
      <p class="category-total">历史总支出: ¥{{ totalAmountHistory }}</p>
    </div>
    <template #footer>
      <el-button link @click="handleViewDetail">查看详情</el-button>
    </template>
  </el-card>
</template>

<script setup>

const props = defineProps({
  category: {
    type: Object,
    required: true
  },
  // 上月总支出
  totalAmountLast: {
    type: String,
    default: '0.00'
  },
  // 当月总支出
  totalAmountCurrent: {
    type: String,
    default: '0.00'
  },
  // 历史总支出
  totalAmountHistory: {
    type: String,
    default: '0.00'
  }
});

const emit = defineEmits(['view-detail']);

// 点击查看详情
const handleViewDetail = () => {
  emit('view-detail', props.category);
};

// 点击卡片
const handleCardClick = () => {
  // 阻止事件冒泡
  event.stopPropagation();
  handleViewDetail();
};

</script>

<style scoped>
.category-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  max-width: 480px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
  border-color: #409eff;
}

.card-header {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.category-card :deep(.el-card__body) {
  padding: 16px;
}

.category-card :deep(.el-card__header) {
  padding: 12px 16px;
  background-color: #fafafa;
}

.category-total {
  font-size: 20px;
  font-weight: 600;
  color: #f56c6c;
  margin-top: 12px;
  transition: color 0.3s;
}

.category-card:hover .category-total {
  color: #f78989;
}

/* 按钮悬停效果 */
:deep(.el-button--text) {
  transition: all 0.3s;
}

:deep(.el-button--text):hover {
  background-color: #ecf5ff;
  color: #409eff !important;
}
</style>